<template>
	<view class="food-detail-page">
		<!-- 头部图片轮播 -->
		<view class="header-swiper">
			<swiper class="swiper" indicator-dots circular autoplay interval="3000" duration="500">
				<swiper-item v-for="(image, index) in foodInfo.images" :key="index">
					<image :src="image" mode="aspectFill" class="swiper-image"></image>
				</swiper-item>
			</swiper>

			<!-- 返回按钮 -->
			<view class="back-btn" @click="goBack">
				<u-icon name="arrow-left" color="#fff" size="24"></u-icon>
			</view>

			<!-- 右上角功能按钮 -->
			<!-- <view class="header-actions">
				<view class="action-btn" @click="toggleFavorite">
					<u-icon :name="hotelInfo.isFavorite ? 'heart-fill' : 'heart'" color="#fff" size="24"></u-icon>
				</view>
				<view class="action-btn" @click="shareHotel">
					<u-icon name="share" color="#fff" size="24"></u-icon>
				</view>
				<view class="action-btn">
					<u-icon name="more-dot-fill" color="#fff" size="24"></u-icon>
				</view>
			</view> -->

			<!-- 图片指示器 -->
			<view class="image-indicator">
				<text>{{ currentImageIndex + 1 }}/{{ foodInfo.images.length }}</text>
			</view>
		</view>

		<!-- 商家信息卡片 -->
		<view class="shop-info-card">
			<view class="shop-header">
				<view class="shop-left">
					<image :src="shopInfo.logo" class="shop-logo" mode="aspectFill"></image>
					<view class="shop-basic">
						<view class="shop-name">{{ shopInfo.name }}</view>
						<view class="shop-rating">
							<view class="stars">
								<text v-for="i in 5" :key="i" class="star"
									:class="{ active: i <= shopInfo.rating }">★</text>
							</view>
							<text class="rating-text">{{ shopInfo.rating }}</text>
							<text class="reviews-text">{{ shopInfo.reviews }}条评价</text>
							<u-icon name="arrow-right" size="12" color="#fa436a"></u-icon>
						</view>
						<text class="price-text">¥{{ shopInfo.avgPrice }}/人</text>
					</view>
				</view>
			</view>

			<view class="shop-status">
				<view class="status-item">
					<text class="status-label">营业中</text>
					<text class="status-time">{{ shopInfo.businessHours }}</text>
					<text class="status-tag">安心吃</text>
				</view>
				<view class="merchant-detail" @click="showMerchantDetail">
					<text>商家详情</text>
					<u-icon name="arrow-right" size="12" color="#909399"></u-icon>
				</view>
			</view>

			<view class="shop-location">
				<view class="location-info">
					<text class="location-text">{{ shopInfo.address }}</text>
				</view>
				<view class="location-actions">
					<view class="location-btn" @click="callShop">
						<u-icon name="phone" size="20" color="#333"></u-icon>
					</view>
					<view class="location-btn" @click="navigateToShop">
						<u-icon name="map" size="20" color="#333"></u-icon>
					</view>
				</view>
			</view>

			<text class="distance-text">距您{{ shopInfo.distance }} 步行{{ shopInfo.walkTime }}</text>
		</view>

		<!-- 导航栏 -->
		<!-- <u-sticky offset-top="0">
			<view class="nav-tabs">
				<view v-for="(tab, index) in tabs" :key="index" class="nav-tab" :class="{ active: activeTab === index }"
					@click="switchTab(index)">
					<text>{{ tab.name }}</text>
					<text v-if="tab.badge" class="tab-badge">{{ tab.badge }}</text>
				</view>
			</view>
		</u-sticky> -->

		<!-- 内容区域 -->
		<scroll-view class="content-scroll" scroll-y>
			<!-- 团购 -->
			<view class="group-section" v-if="activeTab === 0">
				<view class="group-header">
					<text class="group-title">团购 ({{ groupDeals.length }})</text>
				</view>

							<view v-for="(deal, index) in groupDeals" :key="index" class="group-item" @click="goToMealDetail(deal)">
				<view class="group-left">
					<image :src="deal.image" mode="aspectFill"></image>
				</view>
				<view class="group-right">
						<view class="group-title">{{ deal.title }}</view>
						<view class="group-tags">
							<text v-for="(tag, tagIndex) in deal.tags" :key="tagIndex" class="group-tag">{{ tag
								}}</text>
						</view>
						<view class="group-rating">
							<u-icon name="thumb-up" size="14" color="#52c41a"></u-icon>
							<text class="rating-percent">{{ deal.satisfaction }}好评</text>
							<text class="rating-comment">"{{ deal.comment }}"</text>
						</view>
						<view class="group-price">
							<text class="current-price">¥{{ deal.currentPrice }}</text>
							<text class="discount-tag">{{ deal.discount }}折</text>
							<text class="original-price">¥{{ deal.originalPrice }}</text>
						</view>
						<view class="group-sales">半年售 {{ deal.sales }}+</view>
					</view>
					<view class="group-actions">
						<!-- <view class="cart-btn" @click="addToCart(deal)">
							<u-icon name="shopping-cart" size="16" color="#fa436a"></u-icon>
						</view> -->
						<view class="buy-btn" @click.stop="buyNow(deal)">抢购</view>
					</view>
				</view>
			</view>

			<!-- 买单 -->
			<view v-if="activeTab === 1" class="pay-section">
				<view class="pay-item">
					<text class="pay-title">在线买单</text>
					<text class="pay-desc">到店消费，在线买单享优惠</text>
					<view class="pay-btn" @click="payOnline">立即买单</view>
				</view>
			</view>

			<!-- 菜品 -->
			<view v-if="activeTab === 2" class="menu-section">
				<view class="menu-category" v-for="(category, categoryIndex) in menuCategories" :key="categoryIndex">
					<view class="category-title">{{ category.name }}</view>
					<view v-for="(dish, dishIndex) in category.dishes" :key="dishIndex" class="dish-item">
						<view class="dish-left">
							<image :src="dish.image" mode="aspectFill"></image>
						</view>
						<view class="dish-info">
							<view class="dish-name">{{ dish.name }}</view>
							<view class="dish-desc">{{ dish.description }}</view>
							<view class="dish-price">¥{{ dish.price }}</view>
						</view>
						<view class="dish-actions">
							<view class="quantity-controls" v-if="dish.quantity > 0">
								<view class="minus-btn" @click="decreaseQuantity(dish)">-</view>
								<text class="quantity">{{ dish.quantity }}</text>
								<view class="plus-btn" @click="increaseQuantity(dish)">+</view>
							</view>
							<view v-else class="add-btn" @click="addDish(dish)">+</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 评价 -->
			<view v-if="activeTab === 3" class="review-section">
				<view class="review-summary">
					<view class="review-score">
						<text class="score-number">{{ shopInfo.rating }}</text>
						<view class="score-stars">
							<text v-for="i in 5" :key="i" class="star"
								:class="{ active: i <= shopInfo.rating }">★</text>
						</view>
						<text class="review-count">{{ shopInfo.reviews }}条评价</text>
					</view>
				</view>

				<view v-for="(review, index) in reviews" :key="index" class="review-item">
					<view class="review-header">
						<image :src="review.avatar" class="user-avatar" mode="aspectFill"></image>
						<view class="user-info">
							<text class="username">{{ review.username }}</text>
							<view class="review-rating">
								<text v-for="i in 5" :key="i" class="star"
									:class="{ active: i <= review.rating }">★</text>
							</view>
						</view>
						<text class="review-date">{{ review.date }}</text>
					</view>
					<view class="review-content">{{ review.content }}</view>
					<view v-if="review.images && review.images.length > 0" class="review-images">
						<image v-for="(img, imgIndex) in review.images" :key="imgIndex" :src="img" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部购物车 -->
		<view class="bottom-cart" v-if="totalQuantity > 0">
			<view class="cart-info" @click="showCart">
				<view class="cart-icon">
					<u-icon name="shopping-cart" size="24" color="#fff"></u-icon>
					<text class="cart-badge">{{ totalQuantity }}</text>
				</view>
				<view class="cart-price">
					<text class="total-price">¥{{ totalPrice }}</text>
					<text class="delivery-fee">另需配送费¥{{ deliveryFee }}</text>
				</view>
			</view>
			<view class="checkout-btn" @click="checkout">
				<text>去结算</text>
			</view>
		</view>

		<!-- 订单确认弹窗 -->
		<order-confirm-popup
			:show="showOrderPopup"
			:order-data="selectedDeal"
			:initial-quantity="orderQuantity"
			:voucher-discount="4"
			@close="closeOrderPopup"
			@quantity-change="handleQuantityChange"
			@wechat-pay="handleWechatPay"
			@submit-order="handleSubmitOrder">
		</order-confirm-popup>
	</view>
</template>

<script>
import OrderConfirmPopup from '@/components/order-confirm-popup.vue'

export default {
	components: {
		OrderConfirmPopup
	},
	data() {
		return {
			statusBarHeight: 0,
			activeTab: 0,
			deliveryFee: 5,
			currentImageIndex: 0,
			showOrderPopup: false,
			orderQuantity: 1,
			selectedDeal: {},
			foodInfo: {
				images: ['/static/temp/banner2.jpg', '/static/temp/banner3.jpg', '/static/temp/banner4.jpg'],
				name: '朱峰逸的面馆',
				rating: 4.0,
				reviews: 109,
				avgPrice: 13,
				businessHours: '10:00-20:30',
				address: '槐荫区齐鲁之门',
				distance: '54米',
				walkTime: '1分钟'
			},

			shopInfo: {
				id: 1,
				name: '朱峰逸的面馆',
				logo: '/static/temp/banner2.jpg',
				coverImage: '/static/temp/banner3.jpg',
				rating: 4.0,
				reviews: 109,
				avgPrice: 13,
				businessHours: '10:00-20:30',
				address: '槐荫区齐鲁之门',
				distance: '54米',
				walkTime: '1分钟'
			},
			tabs: [
				{ name: '超值券', badge: '' },
				{ name: '团购', badge: '4折起' },
				{ name: '买单', badge: '' },
				{ name: '菜品', badge: '' },
				{ name: '评价', badge: '(109)' }
			],
			groupDeals: [
				{
					id: 1,
					title: '【招牌推荐】大碗面单人套餐',
					image: '/static/temp/banner4.jpg',
					tags: ['全周可用', '免预约', '随时退'],
					satisfaction: '91%',
					comment: '宽面非常好吃',
					currentPrice: 9.9,
					discount: 6.6,
					originalPrice: 15,
					sales: 2000
				},
				{
					id: 2,
					title: '单人【五店同庆】大碗吃面',
					image: '/static/temp/ad1.jpg',
					tags: ['全周可用', '免预约', '随时退'],
					satisfaction: '95%',
					comment: '面更加有嚼劲',
					currentPrice: 8.8,
					discount: 7.4,
					originalPrice: 12,
					sales: 900
				},
				{
					id: 3,
					title: '【招牌推荐】大碗面单人套餐',
					image: '/static/temp/banner4.jpg',
					tags: ['全周可用', '免预约', '随时退'],
					satisfaction: '91%',
					comment: '宽面非常好吃',
					currentPrice: 9.9,
					discount: 6.6,
					originalPrice: 15,
					sales: 2000
				},
				{
					id: 4,
					title: '单人【五店同庆】大碗吃面',
					image: '/static/temp/ad1.jpg',
					tags: ['全周可用', '免预约', '随时退'],
					satisfaction: '95%',
					comment: '面更加有嚼劲',
					currentPrice: 8.8,
					discount: 7.4,
					originalPrice: 12,
					sales: 900
				}
			],
			menuCategories: [
				{
					name: '招牌面条',
					dishes: [
						{
							id: 1,
							name: '红烧牛肉面',
							description: '精选优质牛肉，口感鲜美',
							price: 18,
							image: '/static/temp/banner2.jpg',
							quantity: 0
						},
						{
							id: 2,
							name: '西红柿鸡蛋面',
							description: '经典搭配，营养丰富',
							price: 12,
							image: '/static/temp/banner3.jpg',
							quantity: 0
						}
					]
				},
				{
					name: '小菜配菜',
					dishes: [
						{
							id: 3,
							name: '凉拌黄瓜',
							description: '清爽开胃',
							price: 6,
							image: '/static/temp/banner4.jpg',
							quantity: 0
						}
					]
				}
			],
			reviews: [
				{
					id: 1,
					username: '美食爱好者',
					avatar: '/static/temp/c3.png',
					rating: 5,
					date: '2024-01-15',
					content: '面条很好吃，汤很鲜美，老板人也很好，会再来的！',
					images: ['/static/temp/banner2.jpg', '/static/temp/banner3.jpg']
				},
				{
					id: 2,
					username: '吃货小王',
					avatar: '/static/temp/c5.png',
					rating: 4,
					date: '2024-01-10',
					content: '味道不错，分量足，性价比很高',
					images: []
				}
			]
		}
	},
	onLoad(option) {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;

		if (option.foodId) {
			this.loadShopDetail(option.foodId);
		}
	},
	computed: {
		totalQuantity() {
			let total = 0;
			this.menuCategories.forEach(category => {
				category.dishes.forEach(dish => {
					total += dish.quantity || 0;
				});
			});
			return total;
		},
		totalPrice() {
			let total = 0;
			this.menuCategories.forEach(category => {
				category.dishes.forEach(dish => {
					total += (dish.quantity || 0) * dish.price;
				});
			});
			return total.toFixed(2);
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},

		handleSearch() {
			uni.showToast({
				title: '搜索功能',
				icon: 'none'
			});
		},

		handleCollect() {
			uni.showToast({
				title: '收藏成功',
				icon: 'success'
			});
		},

		handleShare() {
			uni.showToast({
				title: '分享功能',
				icon: 'none'
			});
		},

		handleMore() {
			uni.showActionSheet({
				itemList: ['举报', '不感兴趣', '查看商家证照'],
				success: (res) => {
					console.log('选择了：', res.tapIndex);
				}
			});
		},

		showMerchantDetail() {
			uni.showToast({
				title: '查看商家详情',
				icon: 'none'
			});
		},

		callShop() {
			uni.makePhoneCall({
				phoneNumber: '400-123-4567'
			});
		},

		navigateToShop() {
			uni.showToast({
				title: '导航到店铺',
				icon: 'none'
			});
		},

		switchTab(index) {
			this.activeTab = index;
			uni.vibrateShort();
		},

		buyVoucher() {
			uni.showToast({
				title: '购买代金券',
				icon: 'none'
			});
		},

		addToCart(deal) {
			uni.showToast({
				title: '已加入购物车',
				icon: 'success'
			});
		},

		buyNow(deal) {
			this.selectedDeal = deal;
			this.orderQuantity = 1;
			this.showOrderPopup = true;
		},

		closeOrderPopup() {
			this.showOrderPopup = false;
		},

		// 处理数量变化
		handleQuantityChange(quantity) {
			this.orderQuantity = quantity;
		},

		// 处理微信支付
		handleWechatPay(orderInfo) {
			uni.showToast({
				title: '微信支付功能',
				icon: 'none'
			});
			console.log('微信支付订单信息:', orderInfo);
		},

		// 处理订单提交
		handleSubmitOrder(orderInfo) {
			uni.showToast({
				title: '订单提交成功',
				icon: 'success'
			});
			console.log('提交订单信息:', orderInfo);
			this.showOrderPopup = false;
		},

		goToMealDetail(deal) {
			uni.navigateTo({
				url: `/pages/food/mealDetail?mealId=${deal.id}&title=${deal.title}`
			});
		},

		payOnline() {
			uni.showToast({
				title: '在线买单',
				icon: 'none'
			});
		},

		addDish(dish) {
			dish.quantity = 1;
			this.$forceUpdate();
			uni.vibrateShort();
		},

		increaseQuantity(dish) {
			dish.quantity++;
			this.$forceUpdate();
			uni.vibrateShort();
		},

		decreaseQuantity(dish) {
			if (dish.quantity > 0) {
				dish.quantity--;
				this.$forceUpdate();
				uni.vibrateShort();
			}
		},

		showCart() {
			uni.showToast({
				title: '查看购物车',
				icon: 'none'
			});
		},

		checkout() {
			if (this.totalQuantity === 0) {
				uni.showToast({
					title: '请先选择商品',
					icon: 'none'
				});
				return;
			}

			uni.showToast({
				title: '前往结算',
				icon: 'none'
			});
		},

		loadShopDetail(shopId) {
			// 根据shopId加载商家详情
			console.log('加载商家详情:', shopId);
		}
	}
}
</script>

<style lang="scss" scoped>
.food-detail-page {
	background: #f5f5f5;
	min-height: 100vh;
}

.header-swiper {
	position: relative;
	height: 500upx;

	.swiper {
		width: 100%;
		height: 100%;

		.swiper-image {
			width: 100%;
			height: 100%;
		}
	}

	.back-btn {
		position: absolute;
		top: 60upx;
		left: 30upx;
		width: 64upx;
		height: 64upx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.header-actions {
		position: absolute;
		top: 60upx;
		right: 30upx;
		display: flex;
		gap: 20upx;
		z-index: 10;

		.action-btn {
			width: 64upx;
			height: 64upx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.image-indicator {
		position: absolute;
		bottom: 30upx;
		right: 30upx;
		padding: 8upx 16upx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20upx;

		text {
			color: #fff;
			font-size: 24upx;
		}
	}
}


/* 商家信息卡片 */
.shop-info-card {
	background: #fff;
	padding: 40upx 30upx 30upx;
	box-shadow: 0 8upx 32upx rgba(0, 0, 0, 0.12);

	.shop-header {
		.shop-left {
			display: flex;
			align-items: flex-start;

			.shop-logo {
				width: 140upx;
				height: 140upx;
				border-radius: 20upx;
				margin-right: 24upx;
				box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.1);
			}

			.shop-basic {
				flex: 1;

				.shop-name {
					font-size: 40upx;
					font-weight: 700;
					color: #303133;
					margin-bottom: 16upx;
					line-height: 1.3;
				}

				.shop-rating {
					display: flex;
					align-items: center;
					margin-bottom: 8upx;

					.stars {
						display: flex;
						margin-right: 12upx;

						.star {
							font-size: 28upx;
							color: #e0e0e0;
							margin-right: 2upx;

							&.active {
								color: #ff9500;
							}
						}
					}

					.rating-text {
						font-size: 32upx;
						font-weight: 700;
						color: #ff9500;
						margin-right: 12upx;
					}

					.reviews-text {
						font-size: 28upx;
						color: #909399;
						margin-right: 8upx;
					}
				}

				.price-text {
					font-size: 28upx;
					color: #909399;
					font-weight: 500;
				}
			}
		}
	}

	.shop-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 24upx 0;

		.status-item {
			display: flex;
			align-items: center;
			gap: 12upx;

			.status-label {
				color: #52c41a;
				font-weight: 500;
			}

			.status-time {
				color: #303133;
			}

			.status-tag {
				background: #f0f9ff;
				color: #1890ff;
				padding: 4upx 8upx;
				border-radius: 4upx;
				font-size: 20upx;
			}
		}

		.merchant-detail {
			display: flex;
			align-items: center;
			color: #909399;
			font-size: 24upx;

			text {
				margin-right: 4upx;
			}
		}
	}

	.shop-location {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12upx;

		.location-info {
			flex: 1;

			.location-text {
				color: #303133;
				font-size: 26upx;
			}
		}

		.location-actions {
			display: flex;
			gap: 20upx;

			.location-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60upx;
				height: 60upx;
				background: #f5f5f5;
				border-radius: 50%;
			}
		}
	}

	.distance-text {
		color: #909399;
		font-size: 24upx;
	}
}

/* 导航栏 */
.nav-tabs {
	display: flex;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
	box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.05);

	.nav-tab {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 96upx;
		position: relative;
		transition: all 0.3s ease;

		&.active {
			color: #fa436a;
			font-weight: 600;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 80upx;
				height: 6upx;
				background: linear-gradient(90deg, #fa436a, #ff6b7a);
				border-radius: 3upx;
			}
		}

		text {
			font-size: 30upx;
			transition: all 0.3s ease;
		}

		.tab-badge {
			background: linear-gradient(135deg, #fa436a, #ff6b7a);
			color: #fff;
			font-size: 20upx;
			padding: 4upx 8upx;
			border-radius: 10upx;
			margin-left: 8upx;
			font-weight: 500;
			box-shadow: 0 2upx 6upx rgba(250, 67, 106, 0.3);
		}
	}
}

/* 内容区域 */
.content-scroll {
	padding: 20upx 30upx 200upx;
}

/* 团购 */
.group-section {
	.group-header {
		margin-bottom: 24upx;

		.group-title {
			font-size: 36upx;
			font-weight: 700;
			color: #303133;
		}
	}

	.group-item {
		background: #fff;
		border-radius: 20upx;
		padding: 28upx;
		margin-bottom: 24upx;
		display: flex;
		box-shadow: 0 6upx 20upx rgba(0, 0, 0, 0.08);
		border: 1px solid #f5f5f5;
		transition: all 0.3s ease;
		position: relative;

		&:active {
			transform: translateY(-2upx);
			box-shadow: 0 8upx 24upx rgba(0, 0, 0, 0.12);
		}

		.group-left {
			width: 180upx;
			height: 180upx;
			margin-right: 24upx;
			border-radius: 16upx;
			overflow: hidden;
			box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.1);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.group-right {
			flex: 1;

			.group-title {
				font-size: 32upx;
				font-weight: 600;
				color: #303133;
				margin-bottom: 16upx;
				line-height: 1.4;
			}

			.group-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 10upx;
				margin-bottom: 16upx;

				.group-tag {
					background: #f8f9fa;
					color: #606266;
					font-size: 22upx;
					padding: 6upx 12upx;
					border-radius: 8upx;
					border: 1px solid #e9ecef;
					font-weight: 500;
				}
			}

			.group-rating {
				display: flex;
				align-items: center;
				margin-bottom: 16upx;

				.rating-percent {
					color: #52c41a;
					font-size: 24upx;
					margin: 0 10upx;
					font-weight: 600;
				}

				.rating-comment {
					color: #909399;
					font-size: 24upx;
				}
			}

			.group-price {
				display: flex;
				align-items: center;
				gap: 12upx;
				margin-bottom: 12upx;

				.current-price {
					color: #fa436a;
					font-size: 32upx;
					font-weight: 700;
				}

				.discount-tag {
					background: linear-gradient(135deg, #fa436a, #ff6b7a);
					color: #fff;
					font-size: 20upx;
					padding: 4upx 8upx;
					border-radius: 6upx;
					font-weight: 600;
					box-shadow: 0 2upx 6upx rgba(250, 67, 106, 0.3);
				}

				.original-price {
					color: #909399;
					font-size: 24upx;
					text-decoration: line-through;
					font-weight: 500;
				}
			}

			.group-sales {
				color: #909399;
				font-size: 24upx;
				font-weight: 500;
			}
		}

		.group-actions {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 16upx;
			position: absolute;
			bottom: 20upx;
			right: 20upx;

			.cart-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 64upx;
				height: 64upx;
				background: #fff;
				border: 2px solid #fa436a;
				border-radius: 50%;
				transition: all 0.3s ease;

				&:active {
					background: #fa436a;
					transform: scale(0.9);
				}
			}

			.buy-btn {
				background: linear-gradient(135deg, #fa436a, #ff6b7a);
				color: #fff;
				padding: 12upx 24upx;
				border-radius: 20upx;
				font-size: 26upx;
				font-weight: 600;
				box-shadow: 0 4upx 12upx rgba(250, 67, 106, 0.4);
				transition: all 0.3s ease;

				&:active {
					transform: translateY(1upx);
					box-shadow: 0 2upx 8upx rgba(250, 67, 106, 0.4);
				}
			}
		}
	}
}

/* 买单 */
.pay-section {
	.pay-item {
		background: #fff;
		border-radius: 16upx;
		padding: 40upx;
		text-align: center;
		box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.05);

		.pay-title {
			font-size: 32upx;
			font-weight: 600;
			color: #303133;
			margin-bottom: 12upx;
		}

		.pay-desc {
			color: #909399;
			font-size: 26upx;
			margin-bottom: 30upx;
		}

		.pay-btn {
			background: #fa436a;
			color: #fff;
			padding: 16upx 40upx;
			border-radius: 24upx;
			font-size: 28upx;
			font-weight: 500;
			display: inline-block;
		}
	}
}

/* 菜品 */
.menu-section {
	.menu-category {
		margin-bottom: 40upx;

		.category-title {
			font-size: 32upx;
			font-weight: 600;
			color: #303133;
			margin-bottom: 20upx;
		}

		.dish-item {
			background: #fff;
			border-radius: 16upx;
			padding: 24upx;
			margin-bottom: 16upx;
			display: flex;
			align-items: center;
			box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.05);

			.dish-left {
				width: 120upx;
				height: 120upx;
				margin-right: 20upx;
				border-radius: 12upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.dish-info {
				flex: 1;

				.dish-name {
					font-size: 28upx;
					font-weight: 500;
					color: #303133;
					margin-bottom: 8upx;
				}

				.dish-desc {
					color: #909399;
					font-size: 22upx;
					margin-bottom: 8upx;
				}

				.dish-price {
					color: #fa436a;
					font-size: 26upx;
					font-weight: 600;
				}
			}

			.dish-actions {
				.quantity-controls {
					display: flex;
					align-items: center;
					background: #f5f5f5;
					border-radius: 20upx;

					.minus-btn,
					.plus-btn {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40upx;
						height: 40upx;
						background: #fa436a;
						color: #fff;
						border-radius: 50%;
						font-size: 24upx;
						font-weight: 600;
					}

					.quantity {
						min-width: 40upx;
						text-align: center;
						font-size: 26upx;
						font-weight: 500;
					}
				}

				.add-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40upx;
					height: 40upx;
					background: #fa436a;
					color: #fff;
					border-radius: 50%;
					font-size: 24upx;
					font-weight: 600;
				}
			}
		}
	}
}

/* 评价 */
.review-section {
	.review-summary {
		background: #fff;
		border-radius: 16upx;
		padding: 30upx;
		margin-bottom: 20upx;
		text-align: center;
		box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.05);

		.review-score {
			.score-number {
				font-size: 48upx;
				font-weight: 600;
				color: #fa436a;
			}

			.score-stars {
				display: flex;
				justify-content: center;
				margin: 12upx 0;

				.star {
					font-size: 24upx;
					color: #e0e0e0;
					margin: 0 2upx;

					&.active {
						color: #ff9500;
					}
				}
			}

			.review-count {
				color: #909399;
				font-size: 24upx;
			}
		}
	}

	.review-item {
		background: #fff;
		border-radius: 16upx;
		padding: 24upx;
		margin-bottom: 16upx;
		box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.05);

		.review-header {
			display: flex;
			align-items: center;
			margin-bottom: 16upx;

			.user-avatar {
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				margin-right: 16upx;
			}

			.user-info {
				flex: 1;

				.username {
					font-size: 26upx;
					font-weight: 500;
					color: #303133;
					margin-bottom: 4upx;
				}

				.review-rating {
					.star {
						font-size: 18upx;
						color: #e0e0e0;

						&.active {
							color: #ff9500;
						}
					}
				}
			}

			.review-date {
				color: #909399;
				font-size: 22upx;
			}
		}

		.review-content {
			color: #303133;
			font-size: 26upx;
			line-height: 1.5;
			margin-bottom: 16upx;
		}

		.review-images {
			display: flex;
			gap: 12upx;

			image {
				width: 120upx;
				height: 120upx;
				border-radius: 8upx;
			}
		}
	}
}

/* 底部购物车 */
.bottom-cart {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 20upx 30upx;
	border-top: 1px solid #f0f0f0;
	display: flex;
	align-items: center;
	box-shadow: 0 -4upx 12upx rgba(0, 0, 0, 0.1);

	.cart-info {
		flex: 1;
		display: flex;
		align-items: center;

		.cart-icon {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			background: #fa436a;
			border-radius: 50%;
			margin-right: 16upx;

			.cart-badge {
				position: absolute;
				top: -8upx;
				right: -8upx;
				background: #ff4d4f;
				color: #fff;
				font-size: 18upx;
				padding: 2upx 6upx;
				border-radius: 10upx;
				min-width: 20upx;
				text-align: center;
			}
		}

		.cart-price {
			.total-price {
				font-size: 32upx;
				font-weight: 600;
				color: #fa436a;
			}

			.delivery-fee {
				color: #909399;
				font-size: 20upx;
				margin-left: 8upx;
			}
		}
	}

	.checkout-btn {
		background: #fa436a;
		color: #fff;
		padding: 16upx 32upx;
		border-radius: 24upx;
		font-size: 28upx;
		font-weight: 500;
	}
}


</style>